import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'

Vue.use(VueRouter)
NProgress.configure({showSpinner: false}) // NProgress Configuration

const routes = [
    {
        path: '/',
        name: 'Layout',
        component: () => import('@/layout'),
        redirect: '/Design',
        children: [
            {
                path: "/Design",
                name: "Design",
                component: () => import("@/views/design"),
                meta: {title: '设计模式', icon: 'money'},
            },
            {
                path: "/Canvas",
                name: "Canvas",
                component: () => import("@/views/canvas"),
                meta: {title: 'Canvas', icon: 'money'},
            },
            {
                path: "/CSS",
                name: "CSS",
                component: () => import("@/views/css"),
                meta: {title: 'CSS', icon: 'money'},
            },
            {
                path: "/Demo",
                name: "Demo",
                component: () => import("@/views/demo"),
                meta: {title: 'Demo', icon: 'money'},
            },
            {
                path: "/About",
                name: "About",
                component: () => import("@/views/about"),
                meta: {title: '关于', icon: 'money'},
            },

        ]
    },
    {
        path: "/404",
        name: "404",
        component: () => import("@/views/error"),
        meta: {title: '404', icon: 'money'},
    },
]

const router = new VueRouter({
    routes
})

//解决点击重复路由报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

router.beforeEach(async (to, from, next) => {
    NProgress.start()
    document.title = getPageTitle(to.meta.title)
    if (to.matched.length === 0) {
        next('/404') // 判断此跳转路由的来源路由是否存在，存在的情况跳转到来源路由，否则跳转到404页面
    }
    next()
})

router.afterEach(() => {
    NProgress.done()
})
export default router
